<!-- 在宿舍人员 -->

<template>
  <div id="Fss">
    <!-- 返回按钮 -->
    <button @click="goBackToManagement" class="back-button">×</button>

    <h2>宿舍管理系统</h2>
    <div style="display: flex; justify-content: center; align-items: center;">
      <input v-model="name" placeholder="请输入姓名" @input="checkDormitory" />
      <!-- <button v-if="!showAddForm" @click="showAddForm = true"
        style="margin: 3px; font-family: '宋体'; font-size: 13px;">新增人员</button> -->
    </div>
    <br>
    <span v-if="result !== null">该人是在：{{ result }}</span>
    <br>
    <button v-if="result" @click="goToDormitoryDetails" class="details-button">查看</button>

    <!-- 新增人员表单 -->
    <!-- <div v-if="showAddForm" class="add-form">
      <h4 style="margin: 5px;">新增人员</h4>
      <input v-model="newPerson.name" placeholder="姓名" />
      <input v-model="newPerson.education" placeholder="学历" />
      <input v-model="newPerson.phone" placeholder="电话" />
      <select v-model="newPerson.dormitoryType">
        <option value="男宿舍">男宿舍</option>
        <option value="女宿舍">女宿舍</option>
      </select>
      <input v-model="newPerson.level" placeholder="级别" />
      <button @click="addPerson">添加</button>
      <button @click="showAddForm = false">取消</button>
    </div> -->

    <!-- 修改人员表单 -->
    <div v-if="showEditForm">
      <h3>修改人员信息</h3>
      <input v-model="editedPerson.name" placeholder="姓名" />
      <input v-model="editedPerson.education" placeholder="学历" />
      <input v-model="editedPerson.phone" placeholder="电话" />
      <select v-model="editedPerson.dormitoryType">
        <option value="男宿舍">男宿舍</option>
        <option value="女宿舍">女宿舍</option>
      </select>
      <input v-model="editedPerson.level" placeholder="级别" />
      <button @click="updatePerson">保存</button>
      <button @click="showEditForm = false">取消</button>
    </div>

    <div class="button-container">
      <!-- 宿舍统计按钮 -->
      <div class="toggle">
        <button @click="showStats = !showStats" class="toggle-button">
          {{ showStats ? '隐藏宿舍统计信息' : '显示宿舍统计信息' }}
        </button>
        <!-- <br>
      <button @click="showDormDistribution = !showDormDistribution" class="toggle-button">
        {{ showDormDistribution ? '隐藏宿舍信息表' : '显示宿舍信息表' }}
      </button> -->
      </div>
      <!-- 宿舍信息表 -->
      <div class="toggle">
        <button @click="showDormDistribution = !showDormDistribution" class="toggle-button">
          {{ showDormDistribution ? '隐藏宿舍信息' : '显示宿舍信息' }}
        </button>
      </div>
      <!-- 显示一个按钮，用于切换所有信息的显示与隐藏 -->
      <div class="toggle">
        <button @click="toggleTaskInfo" class="toggle-button">
          {{ showTaskInfo ? '隐藏所有信息' : '显示所有信息' }}
        </button>
      </div>
    </div>
    <!-- 宿舍统计表格 -->
    <div v-if="showStats">
      <h2 style="position: relative; top: -3px;">男宿舍统计</h2>
      <table class="task-table">
        <thead>
          <tr>
            <th>学历</th>
            <th>宿舍编号</th>
            <th>宿舍总间数</th>
            <th>已用宿舍</th>
            <th>剩余床铺</th>
            <th>剩余宿舍</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(capacity, education) in maleCapacities" :key="education">
            <td v-if="education === '小学初中高中中专'">小学/初中/高中/中专</td>
            <td v-else-if="education === '博士硕士'">博士/硕士</td>
            <td v-else>{{ education }}</td>
            <td>
              <!-- <template v-for="(dormitory, index) in getDormitoryNumbers(education)" :key="index">
                <span v-if="index > 0">, </span>
                {{ dormitory }}
              </template> -->
              <span v-if="education === '小学初中高中中专'">10-00|10-01</span>
              <span v-else-if="education === '大专'">10-02|10-03|10-04</span>
              <span v-else-if="education === '本科'">10-05|10-06|10-07</span>
              <span v-else-if="education === '博士硕士'">10-08|10-09</span>
            </td>
            <td>{{ capacity.totalDormitories }}</td>
            <td>{{ getUsedDormitories('男宿舍', education) }}</td>
            <td>{{ getRemainingBeds('男宿舍', education) }}</td>
            <td>{{ capacity.totalDormitories - getUsedDormitories('男宿舍', education) }}</td>
          </tr>
          <tr>
            <td>总计</td>
            <td>/</td>
            <td>{{ getTotalUsedDormitories('男宿舍') + getTotalRemainingDormitories('男宿舍') }}</td>
            <td>{{ getTotalUsedDormitories('男宿舍') }}</td>
            <td>{{ getTotalRemainingBeds('男宿舍') }}</td>
            <td>{{ getTotalRemainingDormitories('男宿舍') }}</td>
          </tr>
        </tbody>
      </table>

      <h2 style="position: relative; top: -3px;">女宿舍统计</h2>
      <table class="task-table">
        <thead>
          <tr>
            <th>学历</th>
            <th>宿舍编号</th>
            <th>宿舍总间数</th>
            <th>已用宿舍</th>
            <th>剩余床铺</th>
            <th>剩余宿舍</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(capacity, education) in femaleCapacities" :key="education">
            <td v-if="education === '小学初中高中中专'">小学/初中/高中/中专</td>
            <td v-else-if="education === '博士硕士'">博士/硕士</td>
            <td v-else>{{ education }}</td>
            <td>
              <span v-if="education === '小学初中高中中专'">20-00|20-01</span>
              <span v-else-if="education === '大专'">20-02|20-03|20-04</span>
              <span v-else-if="education === '本科'">20-05|20-06|20-07</span>
              <span v-else-if="education === '博士硕士'">20-08|20-09</span>
            </td>
            <td>{{ capacity.totalDormitories }}</td>
            <td>{{ getUsedDormitories('女宿舍', education) }}</td>
            <td>{{ getRemainingBeds('女宿舍', education) }}</td>
            <td>{{ capacity.totalDormitories - getUsedDormitories('女宿舍', education) }}</td>
          </tr>
          <tr>
            <td>总计</td>
            <td>/</td>
            <td>{{ getTotalUsedDormitories('女宿舍') + getTotalRemainingDormitories('女宿舍') }}</td>
            <td>{{ getTotalUsedDormitories('女宿舍') }}</td>
            <td>{{ getTotalRemainingBeds('女宿舍') }}</td>
            <td>{{ getTotalRemainingDormitories('女宿舍') }}</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div v-if="showDormDistribution">
      <!-- 男宿舍信息表 -->
      <h2>男宿舍信息表</h2>
      <table class="task-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>已住寝室编号</th>
            <th>居住人员</th>
            <th>剩余居住人数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(people, dormitory, index) in getMaleDormitoryDistribution()" :key="dormitory">
            <td>{{ index + 1 }}</td>
            <td>{{ dormitory }}</td>
            <td>{{ people.join(', ') }}</td>
            <td>{{ getRemainingCapacity(dormitory, '男宿舍') }}</td>
          </tr>
        </tbody>
      </table>

      <!-- 女宿舍信息表 -->
      <h2>女宿舍信息表</h2>
      <table class="task-table">
        <thead>
          <tr>
            <th>序号</th>
            <th>已住寝室编号</th>
            <th>居住人员</th>
            <th>剩余居住人数</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(people, dormitory, index) in getFemaleDormitoryDistribution()" :key="dormitory">
            <td>{{ index + 1 }}</td>
            <td>{{ dormitory }}</td>
            <td>{{ people.join(', ') }}</td>
            <td>{{ getRemainingCapacity(dormitory, '女宿舍') }}</td>
          </tr>
        </tbody>
      </table>
    </div>


    <!-- 如果 showTaskInfo 为 true，显示包含所有人员信息的表格 -->
    <div v-if="showTaskInfo">
      <h2>人员信息表格</h2>
    </div>
    <table v-if="showTaskInfo" class="task-table">
      <thead>
        <tr>
          <th style="text-align: center;">序号</th>
          <th style="text-align: center;">姓名</th>
          <th>学历</th>
          <th>宿舍类型</th>
          <th>级别</th>
          <th>宿舍号</th>
          <th>电话</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(task, index) in tasks" :key="task.name">
          <td>{{ index + 1 }}</td>
          <td><router-link
              :to="{ name: 'dorm_information', params: { type: task.dormitoryType, name: task.name, dormitoryNumber: generateDormitoryNumber(task), phone: task.phone } }"
              class="router-link">{{ task.name }}</router-link></td>
          <td>{{ task.education }}</td>
          <td>{{ task.dormitoryType }}</td>
          <td>{{ task.level }}</td>
          <td>{{ generateDormitoryNumber(task) }}</td> <!-- 使用路由链接显示宿舍号 -->
          <td>{{ task.phone }}</td>
          <td>
            <button @click="editPerson(task)">修改</button>
            <button @click="deletePerson(task)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>


<script>
// import axios from 'axios';   //导入axios(浏览器存储[localstorage])

export default {
  data() {
    return {
      name: "",   //使用了数据绑定（v-model,v-if....)
      result: null,
      showTaskInfo: false,
      showAddForm: false,
      showEditForm: false,
      showStats: false,
      showDormDistribution: false,
      newPerson: {
        name: "",
        education: "",
        dormitoryType: "男宿舍",
        level: "",
        phone: ""
      },
      editedPerson: {},
      maleDormitory: ["曹磊", "孙柏龄", "张文俊", "丁彪"],
      femaleDormitory: ["阳慧", "周洲", "高兰", "小妹", "小花", "小美", "小丽", "小景", "小晓", "小玲"],
      tasks: [
        { id: 1, name: "曹磊", education: "本科", dormitoryType: "男宿舍", level: "基层", phone: "12345678900" },
        { id: 2, name: "孙柏龄", education: "本科", dormitoryType: "男宿舍", level: "基层", phone: "12345678901" },
        { id: 3, name: "张文俊", education: "本科", dormitoryType: "男宿舍", level: "基层", phone: "12345678902" },
        { id: 4, name: "丁彪", education: "硕士", dormitoryType: "男宿舍", level: "高层", phone: "12345678903" },
        { id: 5, name: "阳慧", education: "大专", dormitoryType: "女宿舍", level: "基层", phone: "12345678904" },
        { id: 6, name: "周洲", education: "大专", dormitoryType: "女宿舍", level: "基层", phone: "12345678905" },
        { id: 7, name: "高兰", education: "本科", dormitoryType: "女宿舍", level: "基层", phone: "12345678906" },
        { id: 8, name: "小妹", education: "大专", dormitoryType: "女宿舍", level: "基层", phone: "12345678907" },
        { id: 9, name: "小花", education: "本科", dormitoryType: "女宿舍", level: "基层", phone: "12345678908" },
        { id: 10, name: "小美", education: "本科", dormitoryType: "女宿舍", level: "基层", phone: "12345678909" },
        { id: 11, name: "小景", education: "小学", dormitoryType: "女宿舍", level: "基层", phone: "12345678910" },
        { id: 12, name: "小晓", education: "本科", dormitoryType: "女宿舍", level: "基层", phone: "12345678911" },
        { id: 13, name: "小玲", education: "博士", dormitoryType: "女宿舍", level: "基层", phone: "12345678912" },
      ],
      maleCapacities: {
        大专: { totalDormitories: 3, bedsPerDormitory: 4 },
        小学初中高中中专: { totalDormitories: 2, bedsPerDormitory: 6 },
        博士硕士: { totalDormitories: 2, bedsPerDormitory: 1 },
        本科: { totalDormitories: 3, bedsPerDormitory: 2 }
      },
      femaleCapacities: {
        大专: { totalDormitories: 3, bedsPerDormitory: 4 },
        小学初中高中中专: { totalDormitories: 2, bedsPerDormitory: 6 },
        博士硕士: { totalDormitories: 2, bedsPerDormitory: 1 },
        本科: { totalDormitories: 3, bedsPerDormitory: 2 }
      },
      // 
      // dormitoryNumberMap: {
      //   小学初中高中中专: '10-00|10-01',
      //   大专: '10-02,10-03|10-04',
      //   本科: '10-05,10-06,10-07',
      //   博士硕士: '10-08,10-09'
      // }
    };
  },
  methods: {
    // 2.19
    getDormitoryDistribution() {
      const dormitoryMap = {};
      this.tasks.forEach(task => {
        const dormitoryNumber = this.generateDormitoryNumber(task);
        if (dormitoryNumber !== "未知" && dormitoryNumber !== "宿舍已满") {
          if (!dormitoryMap[dormitoryNumber]) {
            dormitoryMap[dormitoryNumber] = [];
          }
          dormitoryMap[dormitoryNumber].push(task.name);
        }
      });
      return dormitoryMap;
    },
    // 获取男宿舍分配信息
    getMaleDormitoryDistribution() {
      const allDistribution = this.getDormitoryDistribution();
      const maleDistribution = {};
      for (const dormitory in allDistribution) {
        if (dormitory.startsWith('10')) {
          maleDistribution[dormitory] = allDistribution[dormitory];
        }
      }
      return maleDistribution;
    },
    // 获取女宿舍分配信息
    getFemaleDormitoryDistribution() {
      const allDistribution = this.getDormitoryDistribution();
      const femaleDistribution = {};
      for (const dormitory in allDistribution) {
        if (dormitory.startsWith('20')) {
          femaleDistribution[dormitory] = allDistribution[dormitory];
        }
      }
      return femaleDistribution;
    },
    checkDormitory() {
      this.result = null;
      if (this.maleDormitory.includes(this.name)) {
        this.result = "男宿舍";
      } else if (this.femaleDormitory.includes(this.name)) {
        this.result = "女宿舍";
      } else {
        this.result = "未知";
      }
    },
    goToDormitoryDetails() { // 根据用户输入的姓名（this.name），查找对应的人员信息，并跳转到名为dorm_information的信息页面
      const selectedTask = this.tasks.find(task => task.name === this.name);  // this.tasks是一个数组，存储了所有人员信息，每个元素是一个对象，包含人员姓名、学历、宿舍类型、电话等属性
      if (selectedTask) {
        const dormitoryNumber = this.generateDormitoryNumber(selectedTask);
        const grilData = this.getFemaleDormitoryDistribution();
        const peopleNum = this.getRemainingCapacity(dormitoryNumber, selectedTask.dormitoryType)
        const routeData = {
          ...selectedTask,
          type: this.result,
          name: this.name,
          dormitoryNumber: dormitoryNumber,
          dormitoryOtherPeople: grilData[dormitoryNumber] || [],//宿舍所有人员
          peopleNum: peopleNum, // 剩余人数
        }
        this.$router.push({ name: 'dorm_information', params: routeData });
      }
    },
    toggleTaskInfo() {
      this.showTaskInfo = !this.showTaskInfo;
    },
    generateDormitoryNumber(task) {
      let bedsPerDormitory;
      let startIndex;
      switch (task.education) {
        case "小学":
        case "初中":
        case "高中":
        case "中专":
          bedsPerDormitory = 6;
          startIndex = 0;
          break;
        case "大专":
          bedsPerDormitory = 4;
          startIndex = 2;
          break;
        case "本科":
          bedsPerDormitory = 2;
          startIndex = 5;
          break;
        case "硕士":
        case "博士":
          bedsPerDormitory = 1;
          startIndex = 8;
          break;
        default:
          return "未知";
      }
      const dormitoryPrefix = task.dormitoryType === "男宿舍" ? "10" : "20";
      const sameTypeAndEducation = this.tasks.filter(
        t => t.dormitoryType === task.dormitoryType &&
          ((['小学', '初中', '高中', '中专'].includes(task.education) && ['小学', '初中', '高中', '中专'].includes(t.education)) ||
            (['博士', '硕士'].includes(task.education) && ['博士', '硕士'].includes(t.education)) ||
            t.education === task.education)
      );
      const personIndex = sameTypeAndEducation.indexOf(task);
      const dormitoryIndex = Math.floor(personIndex / bedsPerDormitory);
      const actualIndex = startIndex + dormitoryIndex;
      const capacities = task.dormitoryType === "男宿舍" ? this.maleCapacities : this.femaleCapacities;
      let educationKey;
      if (['小学', '初中', '高中', '中专'].includes(task.education)) {
        educationKey = '小学初中高中中专';
      } else if (['博士', '硕士'].includes(task.education)) {
        educationKey = '博士硕士';
      } else {
        educationKey = task.education;
      }
      const totalDormitories = capacities[educationKey].totalDormitories;
      if (actualIndex >= startIndex + totalDormitories) {
        return "宿舍已满";
      }
      return `${dormitoryPrefix}-${String(actualIndex).padStart(2, '0')}`;
    },
    goBackToManagement() { // 返回到宿舍管理页面
      this.$router.push({ name: 'main' });
    },
    addPerson() {
      if (this.newPerson.name) {
        this.tasks.push({ ...this.newPerson });
        if (this.newPerson.dormitoryType === "男宿舍") {
          this.maleDormitory.push(this.newPerson.name);
        } else {
          this.femaleDormitory.push(this.newPerson.name);
        }
        this.newPerson = {
          name: "",
          education: "",
          dormitoryType: "男宿舍",
          level: "",
          phone: ""
        };
        this.showAddForm = false;
      }
    },
    editPerson(task) {
      this.editedPerson = { ...task };
      this.showEditForm = true;
    },
    updatePerson() {
      const index = this.tasks.findIndex(task => task.name === this.editedPerson.name);
      if (index !== -1) {
        this.tasks[index] = this.editedPerson;
        if (this.editedPerson.dormitoryType === "男宿舍") {
          if (!this.maleDormitory.includes(this.editedPerson.name)) {
            this.maleDormitory.push(this.editedPerson.name);
            const femaleIndex = this.femaleDormitory.indexOf(this.editedPerson.name);
            if (femaleIndex !== -1) {
              this.femaleDormitory.splice(femaleIndex, 1);
            }
          }
        } else {
          if (!this.femaleDormitory.includes(this.editedPerson.name)) {
            this.femaleDormitory.push(this.editedPerson.name);
            const maleIndex = this.maleDormitory.indexOf(this.editedPerson.name);
            if (maleIndex !== -1) {
              this.maleDormitory.splice(maleIndex, 1);
            }
          }
        }
      }
      this.showEditForm = false;
    },
    // 宿舍还剩人数
    getRemainingCapacity(dormitory, dormitoryType) {
      // 根据宿舍编号解析出学历对应的 key
      let educationKey;
      const capacities = dormitoryType === '男宿舍' ? this.maleCapacities : this.femaleCapacities;
      if (dormitory.startsWith('10-00') || dormitory.startsWith('10-01') || dormitory.startsWith('20-00') || dormitory.startsWith('20-01')) {
        educationKey = '小学初中高中中专';
      } else if (dormitory.startsWith('10-02') || dormitory.startsWith('10-03') || dormitory.startsWith('10-04') || dormitory.startsWith('20-02') || dormitory.startsWith('20-03') || dormitory.startsWith('20-04')) {
        educationKey = '大专';
      } else if (dormitory.startsWith('10-05') || dormitory.startsWith('10-06') || dormitory.startsWith('10-07') || dormitory.startsWith('20-05') || dormitory.startsWith('20-06') || dormitory.startsWith('20-07')) {
        educationKey = '本科';
      } else if (dormitory.startsWith('10-08') || dormitory.startsWith('10-09') || dormitory.startsWith('20-08') || dormitory.startsWith('20-09')) {
        educationKey = '博士硕士';
      }

      // 获取该学历对应的每个宿舍的床铺数量
      const bedsPerDormitory = capacities[educationKey].bedsPerDormitory;

      // 获取该宿舍已居住的人数
      const dormitoryDistribution = dormitoryType === '男宿舍' ? this.getMaleDormitoryDistribution() : this.getFemaleDormitoryDistribution();
      const currentResidents = dormitoryDistribution[dormitory] ? dormitoryDistribution[dormitory].length : 0;

      // 计算剩余居住人数
      return Math.max(0, bedsPerDormitory - currentResidents);
    },
    deletePerson(task) {
      const index = this.tasks.indexOf(task);
      if (index !== -1) {
        this.tasks.splice(index, 1);
        if (task.dormitoryType === "男宿舍") {
          const maleIndex = this.maleDormitory.indexOf(task.name);
          if (maleIndex !== -1) {
            this.maleDormitory.splice(maleIndex, 1);
          }
        } else {
          const femaleIndex = this.femaleDormitory.indexOf(task.name);
          if (femaleIndex !== -1) {
            this.femaleDormitory.splice(femaleIndex, 1);
          }
        }
      }
    },
    getUsedDormitories(dormitoryType, education) {
      let students;
      if (education === '小学初中高中中专') {
        students = this.tasks.filter(task => task.dormitoryType === dormitoryType && ['小学', '初中', '高中', '中专'].includes(task.education));
      } else if (education === '博士硕士') {
        students = this.tasks.filter(task => task.dormitoryType === dormitoryType && ['博士', '硕士'].includes(task.education));
      } else {
        students = this.tasks.filter(task => task.dormitoryType === dormitoryType && task.education === education);
      }
      const capacity = dormitoryType === "男宿舍" ? this.maleCapacities[education] : this.femaleCapacities[education];
      return Math.ceil(students.length / capacity.bedsPerDormitory);
    },
    getRemainingBeds(dormitoryType, education) {
      let students;
      if (education === '小学初中高中中专') {
        students = this.tasks.filter(task => task.dormitoryType === dormitoryType && ['小学', '初中', '高中', '中专'].includes(task.education));
      } else if (education === '博士硕士') {
        students = this.tasks.filter(task => task.dormitoryType === dormitoryType && ['博士', '硕士'].includes(task.education));
      } else {
        students = this.tasks.filter(task => task.dormitoryType === dormitoryType && task.education === education);
      }
      const capacity = dormitoryType === "男宿舍" ? this.maleCapacities[education] : this.femaleCapacities[education];
      const totalBeds = capacity.totalDormitories * capacity.bedsPerDormitory;
      return totalBeds - students.length;
    },
    getTotalUsedDormitories(dormitoryType) {
      const capacities = dormitoryType === "男宿舍" ? this.maleCapacities : this.femaleCapacities;
      let total = 0;
      for (const education in capacities) {
        total += this.getUsedDormitories(dormitoryType, education);
      }
      return total;
    },
    getTotalRemainingBeds(dormitoryType) {
      const capacities = dormitoryType === "男宿舍" ? this.maleCapacities : this.femaleCapacities;
      let total = 0;
      for (const education in capacities) {
        total += this.getRemainingBeds(dormitoryType, education);
      }
      return total;
    },
    getTotalRemainingDormitories(dormitoryType) {
      const capacities = dormitoryType === "男宿舍" ? this.maleCapacities : this.femaleCapacities;
      let total = 0;
      for (const education in capacities) {
        total += capacities[education].totalDormitories;
      }
      return total - this.getTotalUsedDormitories(dormitoryType);
    },
    getDormitoryDistribution() {
      const dormitoryMap = {};
      this.tasks.forEach(task => {
        const dormitoryNumber = this.generateDormitoryNumber(task);
        if (dormitoryNumber !== "未知" && dormitoryNumber !== "宿舍已满") {
          if (!dormitoryMap[dormitoryNumber]) {
            dormitoryMap[dormitoryNumber] = [];
          }
          dormitoryMap[dormitoryNumber].push(task.name);
        }
      });
      return dormitoryMap;
    }
  }
};
</script>

<style  lang="scss" scoped>
#Fss {
  font-family: '宋体';
  text-align: center;
  /* margin-top: 30px; */
  background-color: antiquewhite;
}

#Fss h3 {
  position: relative;
  top: 10px;
  /* 可以根据需要调整数值 */

}

.add-form input,
.add-form select,
.add-form button {
  margin: 3px 3px;
  font-family: '宋体';
}

.back-button {
  /* position: absolute; */
  top: 170px;
  right: 250px;

  /* padding: 5px 8px; */
  font-size: 8px;
  /* cursor: pointer; */
  color: white;
  background-color: rgb(178, 178, 250);
  border: none;
  /* border-radius: 2%; */
}

.button-container {
  display: flex;
  justify-content: center;
}

.toggle {
  margin: 0px 10px;
}

.details-button,
.toggle-button,
.back-button {
  font-family: '宋体';
  margin-top: 9px;

  padding: 5px 10px;
  font-size: 13px;
  cursor: pointer;
  color: white;
  background-color: rgb(178, 178, 250);
  /* 显示隐藏按钮背景色 */
  border: none;
  /* border-radius: 5px; */
  /* 边框圆角设置 */
}

.details-button:hover,
.toggle-button:hover,
.back-button:hover {
  background-color: darkblue;
}

.task-table {
  margin-top: 20px;
  font-family: 13px;
  border-collapse: collapse;
  width: 100%;
}

.task-table button {
  margin: 3px 3px;
  font-family: '宋体';
}

.task-table th,
.task-table td {
  /* text-align: center; */
  border: 1px solid #ddd;
  padding: 8px;
}

.task-table th {

  background-color: #f2f2f2;
  text-align: center;
}

.router-link {
  color: blue;
  text-decoration: none;
  cursor: pointer;
}

.router-link:hover {
  color: darkblue;
}
</style>
